<template>
    <div class="personalData">
        <!-- 导航栏 -->
        <Back :sticky="true" title="个人资料" />
        <div>
            <Bg>
                <div class="box">
                    <van-cell-group>
                        <van-cell title="头像" class="headBox">
                            <template #right-icon>
                                <van-uploader :after-read="afterRead">
                                    <template>
                                        <div
                                            class="headImg"
                                            :style="{
                                                backgroundImage: `url(${accountInfo.userImg})`,
                                            }"
                                        ></div>
                                    </template>
                                </van-uploader>
                            </template>
                        </van-cell>
                        <van-cell title="用户id" :value="accountInfo.userId" />
                        <van-field
                            class="name"
                            v-model="nickName"
                            label="昵称"
                            maxlength="15"
                            :show-word-limit="nickName !== ''"
                            :placeholder="accountInfo.nickName"
                            input-align="right"
                        />
                    </van-cell-group>
                    <van-field
                        v-model="desc"
                        autosize
                        label="简介"
                        type="textarea"
                        :placeholder="accountInfo.desc"
                        maxlength="50"
                        input-align="right"
                        :show-word-limit="desc !== ''"
                    />
                </div>
            </Bg>
        </div>
    </div>
</template>

<script>
// 导入公共组件
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
import { Toast } from 'vant';
export default {
    name: 'PersonalData',
    // 注册子组件
    components: {
        Back,
        Bg
    },
    data() {
        return {
            accountInfo: {
                // 昵称
                nickName: '',
                // 简介
                desc: '',
                // 用户id
                userId: '',
                // 用户头像
                userImg: ''
            },

            // 被改动的昵称
            nickName: '',
            // 被改动的简介
            desc: '',

        }
    },
    methods: {
        // 上传头像
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            
            let serverBase64Img = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
            let imgType = file.file.type.replace(/image\//, '');


            this.axios({
                method: 'POST',
                url: '/updateAvatar',
                data: {
                    imgType,
                    serverBase64Img,
                }

            }).then((result) => {
                
                if (result.data.code === 'H001') {
                    this.accountInfo.userImg = file.content;
                    Toast('头像更新成功');
                }
            }).catch((err) => {
                

            });
        },

        //  获取个人资料
        getFindAccountInfo() {
            this.axios({
                method: "GET",
                url: '/findAccountInfo'
            }).then((result) => {
                

                if (result.data.code === 'B001') {
                    this.accountInfo = result.data.result[0];

                    if (this.accountInfo.desc === '') {
                        this.accountInfo.desc = "这个家伙很懒，什么都没有留下!";
                    }
                }
            }).catch((err) => {
                

            });
        },

        // 上传修改后的昵称
        updateNickName(nickName) {
            this.axios({
                method: "POST",
                url: '/updateNickName',
                data: {
                    nickName
                }
            }).then((result) => {
                

            }).catch((err) => {
                

            });
        },
        
        // 上传修改后的简介
        updateDesc(desc) {
            this.axios({
                method: "POST",
                url: '/updateDesc',
                data: {
                    desc
                }
            }).then((result) => {
                

            }).catch((err) => {
                

            });
        }
    },
    // 初始化钩子
    created() {
        this.getFindAccountInfo();
    },
    // 离开组件守卫
    beforeRouteLeave(to, from, next) {

        let mm = 0;
        if (this.nickName.trim() !== '') {
            this.updateNickName(this.nickName);
            mm += 300;
        }
        if (this.desc.trim() !== '') {
            this.updateDesc(this.desc);
            mm += 300;
        }
        setTimeout(() => {
            next();
        }, mm);

    }
}
</script>

<style lang="less" scoped>
.personalData {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f7f7f7;
    overflow: scroll;

    .box {
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        > div {
            border-top-right-radius: 15px;
            border-top-left-radius: 15px;
            .headBox {
                border-top-right-radius: 15px;
                border-top-left-radius: 15px;
            }
        }
    }
    /deep/ .van-hairline--top-bottom::after {
        border-width: 0;
    }
    /deep/ .van-cell__title {
        display: flex;
        align-items: center;
    }
    /deep/ .van-uploader {
        height: 46px;
        width: 46px;
        div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            margin: 0;
        }
    }
    .headImg {
        position: absolute;
        height: 46px;
        width: 46px;
        background: no-repeat center center;
        background-size: cover;
        border: 1px solid #eeeee0;
    }
    /deep/ .van-field__label {
        display: flex;
        align-items: flex-start;
    }
    .name::before {
        content: '';
        position: absolute;
        bottom: 0;
        height: 0;
        width: 91%;
        border-bottom: 1px solid #f6f7f8;
    }
}
</style>